<template>
  <div class="excitation-topology-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-page-header @back="goBack" content="励磁装置拓扑图">
        <template #title>
          <span class="header-title">整流发电机虚拟训练软件</span>
        </template>
        <template #extra>
          <div class="header-actions">
            <el-button type="primary" :icon="Printer" @click="handlePrint">打印</el-button>
            <el-button :icon="Download" @click="handleDownload">下载PDF</el-button>
          </div>
        </template>
      </el-page-header>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 标题区域 -->
      <h1 class="content-title">励磁装置拓扑图</h1>

      <!-- 拓扑图说明 -->
      <section class="content-section">
        <h2>励磁系统概述</h2>
        <p>励磁装置是发电机组的重要组成部分，负责为发电机转子提供稳定的直流励磁电流。在十二相整流发电机系统中，励磁系统采用无刷励磁方式，主要包括副励磁机、励磁机、旋转整流器和自动电压调节器等部分。</p>
        
        <p>整个励磁系统的工作流程如下：</p>
        <ol>
          <li>副励磁机首先建立电压，为AVR提供工作电源</li>
          <li>AVR根据发电机输出电压情况调节励磁机的励磁电流</li>
          <li>励磁机产生交流电，经旋转整流器整流后供给发电机转子</li>
          <li>发电机转子建立磁场，实现发电功能</li>
        </ol>
      </section>

      <!-- 拓扑图展示 -->
      <section class="content-section">
        <h2>励磁装置拓扑图</h2>
        <div class="topology-diagram-container">
          <div class="image-container">
            <img src="@/assets/exciter.png" alt="励磁装置拓扑图" class="topology-image">
            <p class="image-caption">图6-6 励磁装置拓扑图</p>
          </div>
          <p class="image-description">该拓扑图展示了励磁装置各组成部分之间的连接关系和工作流程，包括副励磁机、励磁机、旋转整流器、发电机转子和AVR之间的连接。</p>
        </div>
      </section>

      <!-- 系统组成 -->
      <section class="content-section">
        <h2>系统组成</h2>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="component-item">
              <h3>副励磁机</h3>
              <p>为整个励磁系统提供初始电源，采用永磁式结构，具有可靠性高、维护量小的特点。</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="component-item">
              <h3>励磁机</h3>
              <p>为主发电机转子提供励磁电流，通过AVR控制实现输出电压的稳定。</p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="component-item">
              <h3>旋转整流器</h3>
              <p>将励磁机产生的交流电转换为直流电，供给发电机转子绕组。</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="component-item">
              <h3>自动电压调节器(AVR)</h3>
              <p>监测发电机输出电压，自动调节励磁机励磁电流，确保输出电压稳定。</p>
            </div>
          </el-col>
        </el-row>
      </section>

      <!-- 相关知识链接 -->
      <section class="content-section">
        <h2>相关知识链接</h2>
        <div class="knowledge-links">
          <el-card
              v-for="link in relatedLinks"
              :key="link.title"
              class="link-card"
              @click="navigateTo(link.path)"
          >
            <template #header>
              <div class="card-header">
                <el-icon><Connection /></el-icon>
                <span>{{ link.title }}</span>
              </div>
            </template>
            <div class="card-content">
              <p>{{ link.description }}</p>
              <div class="card-actions">
                <el-tag :type="link.type" size="small">{{ link.category }}</el-tag>
              </div>
            </div>
          </el-card>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Printer, Download, Connection } from '@element-plus/icons-vue';

const router = useRouter();

// 相关知识链接
const relatedLinks = ref([
  {
    title: '励磁机原理',
    description: '了解励磁机的结构和工作原理',
    path: '/principle/exciter',
    category: '核心组件',
    type: 'primary'
  },
  {
    title: '副励磁机原理',
    description: '了解副励磁机为励磁系统提供初始电源的原理',
    path: '/principle/pilot-exciter',
    category: '电源系统',
    type: 'success'
  },
  {
    title: '旋转整流器原理',
    description: '了解交流电转换为直流电的过程',
    path: '/principle/rotating-rectifier',
    category: '电力电子',
    type: 'warning'
  },
  {
    title: '自动电压调节器(AVR)',
    description: '了解AVR如何调节励磁电流保持电压稳定',
    path: '/principle/avr',
    category: '控制系统',
    type: 'danger'
  }
]);

const goBack = () => {
  router.back();
};

const handlePrint = () => {
  window.print();
};

const handleDownload = () => {
  console.log('下载励磁装置拓扑图PDF');
};

const navigateTo = (path) => {
  router.push(path);
};
</script>

<style scoped>
.excitation-topology-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content-wrapper {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-title {
  font-size: 28px;
  color: #303133;
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #409eff;
}

.content-section {
  margin-bottom: 40px;
}

.content-section h2 {
  font-size: 22px;
  color: #303133;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #409eff;
}

.content-section h3 {
  font-size: 18px;
  color: #606266;
  margin: 16px 0 12px 0;
}

.content-section p {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 16px;
}

.content-section ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.content-section li {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 8px;
}

.topology-diagram-container {
  text-align: center;
}

.image-container {
  margin-bottom: 20px;
  text-align: center;
}

.topology-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-caption {
  font-style: italic;
  color: #909399;
  margin-top: 8px;
}

.image-description {
  color: #606266;
}

.component-item {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
  margin-bottom: 20px;
}

.knowledge-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.link-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.card-content {
  min-height: 80px;
}

.card-actions {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .excitation-topology-page {
    padding: 12px;
  }

  .content-wrapper {
    padding: 16px;
  }

  .content-title {
    font-size: 24px;
  }

  .content-section h2 {
    font-size: 20px;
  }

  .knowledge-links {
    grid-template-columns: 1fr;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}

@media print {
  .page-header, .header-actions {
    display: none;
  }

  .excitation-topology-page {
    padding: 0;
    background-color: #fff;
  }

  .content-wrapper {
    padding: 0;
    box-shadow: none;
  }
}
</style>